import { Image, Row, Col } from "antd";
import { PageContainer } from "@ant-design/pro-layout";
import ProForm, {
  ProFormText,
  ProFormTextArea,
  ProFormList,
  ProFormDigit,
} from "@ant-design/pro-form";
import useCommonTable from "@/hooks/useCommonTable";

import { fetchList, add, update, remove } from "@/api/dish";
import UploadFile from "@/components/UploadFile";

export default () => {
  const columns = [
    {
      title: "菜品名称",
      dataIndex: "dishName",
    },
    {
      title: "菜品图片",
      dataIndex: "dishImg",
      render: (_, record) => {
        return <Image width={100} height={100} src={record.dishImg} />;
      },
      search: false,
    },
    {
      title: "菜品规格",
      dataIndex: "specifications",
      search: false,
      render: (_, record) => {
        return record.specifications.map((item, index) => {
          return (
            <div key={index}>
              <span span={12}>{item.specName}，</span>
              <span span={12}>单价：￥{item.sellPrice}</span>
            </div>
          );
        });
      },
    },
    {
      title: "菜品描述",
      width: 500,
      dataIndex: "dishIntroduction",
      search: false,
    },
  ];

  const renderFormItem = ({ type, formRef }) => {
    return (
      <>
        <ProFormText
          label="菜品名称"
          name="dishName"
          rules={[
            { required: true, message: "请输入菜品名称" },
            {
              max: 50,
              message: "最长为50位",
            },
          ]}
        />
        <ProForm.Item
          name="dishImg"
          label="菜品图片"
          rules={[{ required: true, message: "请上传菜品图片" }]}
        >
          <UploadFile />
        </ProForm.Item>

        <ProFormTextArea
          fieldProps={{
            rows: 5,
          }}
          name="dishIntroduction"
          label="菜品描述"
          placeholder="请输入菜品描述"
        />

        <ProFormList
          label="菜品规格"
          name="specifications"
          copyIconProps={false}
          creatorButtonProps={{
            creatorButtonText: "新增",
          }}
        >
          <Row gutter={10}>
            <Col>
              <ProFormText
                label="规格名称"
                key="specName"
                name="specName"
                rules={[
                  { required: true, message: "请输入规格名称" },
                  {
                    max: 100,
                    message: "最长为100位",
                  },
                ]}
              />
            </Col>
            <Col>
              <ProFormDigit
                label="适用人数"
                name="availablePersons"
                placeholder="请输入适用人数"
                min={0}
                fieldProps={{
                  precision: 0,
                }}
                rules={[{ required: true, message: "请输入适用人数" }]}
              />
            </Col>
            <Col>
              <ProFormDigit
                label="单价"
                name="sellPrice"
                placeholder="请输入价格"
                min={0}
                fieldProps={{
                  precision: 2,
                }}
                rules={[{ required: true, message: "请输入价格" }]}
              />
            </Col>
            <Col>
              <ProForm.Item
                name="sepcImg"
                label="规格图片"
                rules={[{ required: true, message: "请上传规格图片" }]}
              >
                <UploadFile />
              </ProForm.Item>
            </Col>
          </Row>
        </ProFormList>
      </>
    );
  };

  return (
    <PageContainer>
      {useCommonTable({
        title: "菜品",
        columns,
        renderFormItem,
        modalWidth: 800,
        fetchList,
        add,
        update,
        remove,
        actionColumnWidth: 200,
        showCheckbox: false,
      })}
    </PageContainer>
  );
};
